<template>
  <div class="users">
    <div class="card-cover">
      <div class="info-wrapper">
        <img src="../../assets/img/user.jpg" />
        <div class="card-info">
          <span>姓名：{{userInfo.name}}</span>
          <br />
          <span>编号：{{userInfo.id}}</span>
        </div>
      </div>
    </div>
    <div class="card-menu">
      <div>
        岗位
        <br />
        <span>{{userInfo.station}}</span>
      </div>
      <div>
        部门
        <br />
        <span>{{userInfo.department}}</span>
      </div>
      <div>
        性别
        <br />
        <span>{{userInfo.sex}}</span>
      </div>
    </div>
    <div class="card-link">
      <van-cell-group>
        <van-cell>班组:{{userInfo.class}}</van-cell>
        <van-cell>授权:{{userInfo.authorization}}</van-cell>
        <van-cell is-link arrow-direction="right">简历:</van-cell>
        <van-cell>查询</van-cell>
      </van-cell-group>
      <div class="button-wrapper">
        <van-button type="danger" @click="logout('123')">退出登录</van-button>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.card-cover {
  width: 100vw;
  height: 30vh;
  background-color: #292727;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .card-info {
    color: #fff;
    font-size: 0.8rem;
    padding: 0.5rem;
    span {
      margin-bottom: 5rem;
    }
  }
  img {
    width: 18vw;
    height: 10vh;
    border-radius: 5vh;
  }
}

.card-menu {
  display: flex;
  div {
    flex: 1;
    padding: 1rem;
    span {
      font-size: 0.8rem;
    }
  }
}

.van-cell {
  padding-left: 2.7rem;
  font-size: 0.9rem;
}

.button-wrapper {
  width: 100%;
  position: absolute;
  bottom: 57px;
}
</style>
<script>
import { Dialog } from "vant";
import { mapState } from "vuex";

export default {
  data() {
    return {
      name: "李四",
      id: "dfdfre",
      post: "维修员",
      department: "田湾静机一部",
      sex: "男",
      class: "",
      source: "",
      phone: ""
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    logout(data) {
      Dialog.confirm({
        title: "退出登录",
        message: "确认退出?"
      })
        .then(() => {
          this.$store.dispatch("user/logout",data).then(res=>{
            this.$router.push('/login');
          })
        })
        .catch(() => {
          console.log("取消退出")
        });
    }
  }
};
</script>
